<template>
    <div class="news_wraper">
        <!-- 导航条 -->
        <Nav />

        <div
            class="banner_wrap"
            v-if="banners&&banners.length>0"
            :style="{'background': 'url('+$baseImageUrl+banners[0].url+')', 'background-repeat': 'no-repeat', 'background-size': '100% 100%'}">
            <swiper v-if="hotNews.length > 0" class="swiper_wrap" ref="mySwiper" :options="swiperOptions">
                <swiper-slide v-for="item in hotNews" class="wrap">
                    <div class="container">
                        <router-link target="_blank" :to="`/news_detail?id=${item.id}`">
                            <div class="left">
                                <img :src="$baseImageUrl+item.coverImg" alt="">
                            </div>
                            <div class="right">
                                <div class="hot_news">
                                    <div class="title">{{ item.title }}</div>
                                    <div class="sub_title">{{ item.subTitle }}</div>
                                </div>
                                <div class="date">{{ item.pushDate }}</div>
                            </div>
                        </router-link>
                    </div>
                </swiper-slide>

            </swiper>
        </div>

        <div class="header_wrap">
            <div class="header">
                <div class="header_title">{{ $t('p5.title') }}</div>
                <div class="icon"></div>
            </div>
        </div>

        <div class="news_items_wrap">
            <div class="container">
                <div class="box">
                    <div class="item" v-for="item in dataList">
                        <router-link target="_blank" :to="`/news_detail?id=${item.id}`">
                            <div class="left">
                                <div class="icon b1" v-if="item.pageType == 1 || item.pageType == 3">News</div>
                                <div class="icon b2" v-if="item.pageType === 2">{{ $t('p5.notice') }}</div>
                            </div>
                            <div class="center">
                                <div class="center_wrap">
                                    <div class="title">{{ item.title }}</div>
                                    <div class="sub_title">{{ item.subTitle }}</div>
                                </div>
                                <div class="date_wrap">
                                    <span class="date">{{ item.pushDate | formatDate }}</span>
                                    <i class="el-icon-arrow-right"></i>
                                </div>
                            </div>
                        </router-link>
                    </div>

                    <div class="pagination">
                        <el-pagination
                            :page.sync="queryParams.page"
                            :page-size="queryParams.limit"
                            :total="queryParams.total"
                            layout="prev, pager, next"
                            @handleSizeChange="handleSizeChange"
                            @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div>
            </div>


        </div>

        <!-- 底部footer -->
        <Footer />

        <BackTop />

    </div>
</template>
<script>
import BackTop from '@/views/components/backtop'
import Nav from '@/views/nav/index'
import Footer from '@/views/footer/index'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css'
import p1 from '@/assets/images/wi/21.png'
import { formatDate, parseTime } from '@/libs/filters'
import { getStore } from '@/libs'
export default {
    name: "index",
    components: {
        BackTop,
        Nav,
        Footer,
        Swiper,
        SwiperSlide
    },
    data() {
        return {
            p1,
            params: null,
            // 查询条件
            queryParams: {
                total: 0,
                page: 1,
                limit: 10,
                sortColumns: 'push_date',
                sortType: 'DESC',

                status: 1,
                pageTypes: '1,2,3',
                terminal: 2,
                country: 1
            },
            queryParamsHotNews: {
                sortColumns: 'push_date',
                sortType: 'DESC',
                status: 1,
                pageType: 3,
                terminal: 2,
                country: 1
            },

            dataList: [],

            hotNews: [],

            swiperOptions: {
                autoplay: true,
                loop: true,
                delay: 1000,
                slidesPerGroupAuto: true,

                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
            },
            banners: []
        }
    },



    created() {
        this.params = this.$route.query

        this.getBanner()
        this.getSwiperDataList()
        this.getDataList()
    },
    methods: {
        /**
         * 获取Banner
         */
        async getBanner() {
            let terminal = 2
            let country = 1

            // 切换语言
            if(getStore({name: 'language'}) === 'jp') {
                country = 2
            }
            const res = await this.$http({
                url: '/api/siteswiper/list',
                method: 'GET',
                params: {cate: 6, terminal, country}
            })
            if (this.ResultMessage(res, false)) {
                if(res.data) {
                    this.banners = res.data
                }
            }
        },


        /**
         * 获取公司列表
         */
         async getDataList() {
            let terminal = 2
            let country = 1

            // 切换语言
            if(getStore({name: 'language'}) === 'jp') {
                country = 2
            }
            this.queryParams = Object.assign({}, this.queryParams, {country})
            const res = await this.$http({
                url: '/api/sitepagelist/page',
                method: 'GET',
                params: this.queryParams
            })
            if (this.ResultMessage(res, false)) {
                this.dataList = res.data.records || []
                this.queryParams.total = res.data.total
            }
        },

        /**
         * 获取公司列表
         */
        async getSwiperDataList() {
            let country = 1

            // 切换语言
            if(getStore({name: 'language'}) === 'jp') {
                country = 2
            }
            this.queryParamsHotNews = Object.assign({}, this.queryParamsHotNews, {country})
            const res = await this.$http({
                url: '/api/sitepagelist/list',
                method: 'GET',
                params: Object.assign({}, this.queryParamsHotNews)
            })
            if (this.ResultMessage(res, false)) {
                this.hotNews = res.data
            }
        },

        /**
         * 每页数
         */
         handleSizeChange(val) {
            this.queryParams.limit = val
            this.getDataList()
        },
        /**
         * 当前页
         */
        handleCurrentChange(val) {
            this.queryParams.page = val
            this.getDataList()
        },
    },
    filters: {
        formatDate(value) {
            if (value) {
                return formatDate(new Date(value), 'yyyy-MM-dd');
            } else {
                return '-';
            }
        }
    }
};
</script>


<style lang="scss" scope>
.news_wraper{
    background-color: #F8F9F9;

    .banner_wrap{
        position: relative;
        width: 100%;
        height: 500px;
        // background-image: url('../../assets/images/wi/about.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;


        .swiper_wrap{
            display: flex;
            justify-content: center;
            align-items: center;
            .swiper-slide {
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-box-align: center;
                -ms-flex-align: center;

                .container{
                    display: flex;
                    width: 100%;
                    a{
                        display: flex;
                        width: 100%;
                        .left{
                            width: 350px;
                            height: 262px;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .right{
                            height: 262px;
                            background: #fff;
                            opacity: .8;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            align-items: flex-start;
                            padding: 0px 20px 10px 20px;
                            width: 100%;
                            flex: 1;


                            .hot_news{
                                .title{
                                    padding-top: 20px;
                                    font-size: 26px;
                                    font-weight: bold;
                                    color: #000;
                                }
                                .sub_title{
                                    margin-top: 20px;
                                    color: #000;
                                    overflow : hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    word-break: break-all; /* 追加这一行代码 */
                                    padding-bottom: 20rpx;
                                }
                            }
                            .date{
                                color: #999;
                            }
                        }
                    }
                }

            }

        }
    }

    .header_wrap{
        .header{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 40px;
            .header_title{
                font-size: 28px;
                font-weight: bold;
                color: #333;
            }
            .icon{
                margin-top: 5px;
                display: block;
                width: 35px;
                height: 5px;
                background-color: #98000A;
                border-top: 2px solid #FCA400;
            }
        }
    }

    .news_items_wrap{
        margin: 50px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 20px;

        .container{
            display: flex;
            justify-content: center;
            .box{
                display: flex;
                flex-direction: column;

                .item{
                    border-bottom: 1px dashed #ddd;
                    width: 100%;
                    display: flex;
                    margin-bottom: 10px;
                    cursor: pointer;
                    a{
                        display: flex;
                        width: 100%;
                        .left{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            padding: 5px;

                            .icon{
                                width: 60px;
                                height: 60px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                        .center{
                            display: flex;
                            flex: 1;
                            flex-direction: column;
                            justify-content: space-between;
                            padding: 5px;
                            .center_wrap{
                                .title{
                                    font-size: 18px;
                                    color: #333;
                                }
                                .sub_title{
                                    color: #999999;
                                    overflow : hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 1;
                                    -webkit-box-orient: vertical;
                                    word-break: break-all; /* 追加这一行代码 */
                                    padding-bottom: 20rpx;
                                }
                            }
                            .date_wrap{
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                color: #CCCCCC;
                                margin-top: 5px;
                                i{
                                    display: block;
                                }
                                .date{
                                    display: block;
                                    display: flex;
                                    justify-content: center;
                                }
                            }
                        }
                    }

                }

                .pagination{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 20px 0;

                    .el-pagination{
                        background: none;
                    }
                    .el-pagination .btn-next, .el-pagination .btn-prev{
                        background: none;
                    }
                    .el-pager li{
                        background: none;
                    }
                }
            }
        }
    }
}

.b1{
    color: #98000A;
    border: 1px solid #98000A;
    border-radius: 10px;
}

.b2{
    border: 1px solid #98000A;;
    background: #98000A;
    color: #fff;
    border-radius: 10px;
}
</style>
